

import type { OptionType, QuestionCheckboxPropsType, questionComponentType } from "@/utils/type"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { Form, Input, Checkbox, Space, Button } from "antd";
import { nanoid } from "nanoid";

import { useEffect } from "react";


type propsType = questionComponentType & {
  onChange: (value: QuestionCheckboxPropsType) => void
}




export default function CheckboxPropComponent(props: propsType) {
  const [form] = Form.useForm();
  const { title, options, isVertical } = props.props;

  const handleChange = () => {
    console.log(form.getFieldsValue())
    props.onChange(form.getFieldsValue())
  }


  useEffect(() => {
    form.setFieldsValue({ title, isVertical, options })
  }, [title, isVertical, form, options])


  return (
    <Form
      onValuesChange={handleChange}
      layout="vertical"
      initialValues={{ title, isVertical, options }}
      form={form}
      disabled={props.isLocked}
    >
      <Form.Item name="title" label="单选标题：" rules={[{ required: true, message: '请输入单选标题' }]}>
        <Input />
      </Form.Item>


      <Form.Item label="选项：">
        <Form.List name="options">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name }, index) => {
                return (
                  <Space key={key} align="baseline">
                    {/* 输入框 */}
                    <Form.Item name={[name, "checked"]}  valuePropName="checked">
                      <Checkbox ></Checkbox> 
                    </Form.Item>
                    <Form.Item name={[name, "label"]} rules={[{ required: true, message: '请输入选项' },{
                      validator:(_, value)=>{
                        // 选项不能重复
                        const { options=[] } = form.getFieldsValue()
                        let num = 0
                        options.forEach((item:OptionType) => {
                          if(item.label === value){
                            num++
                          }
                        })
                        if(num > 1){
                          return Promise.reject(new Error('选项不能重复'))
                        }
                        return Promise.resolve()
                      }
                      }]}>
                      <Input placeholder="请输入文字..." ></Input>
                    </Form.Item>
                    {/* 删除按钮 */}
                    {index > 0 && <MinusCircleOutlined onClick={() => remove(name)} />}
                  </Space>

                )
              })}
              {/* 添加选项 */}
              <Form.Item>
                <Button
                  type="link" onClick={() => add({ label: ``, value:nanoid() })}
                  block icon={<PlusOutlined />}
                >添加选项</Button>

              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>

      <Form.Item name="isVertical" valuePropName="checked">
        <Checkbox>垂直排列</Checkbox>
      </Form.Item>
    </Form>
  )
}
